<template>
  <div class="customer-tracking-business-container">
    <el-row :gutter="15">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            客户基本信息
            <el-button
              class="card-header-tag"
              type="primary"
              size="small"
              @click="CustomerHandle"
            >
              补充详情
            </el-button>
          </template>
          <div>
            <!-- <p>
              <el-text style="color: #999">客户简称：</el-text>
              <el-text style="color: #333">{{ Customer.CustomerName }}</el-text>
            </p> -->
            <p>
              <el-text style="color: #999">客户全称：</el-text>
              <el-text style="color: #333">
                {{ Customer.CustomerAllName }}
              </el-text>
            </p>
            <p>
              <el-text style="color: #999">所属区域：</el-text>
              <el-text style="color: #333">{{ Customer.CityShow }}</el-text>
            </p>
            <p>
              <el-text style="color: #999">地址：</el-text>
              <el-text style="color: #333">{{ Customer.Address }}</el-text>
            </p>
            <p>
              <el-text style="color: #999">电话：</el-text>
              <el-text style="color: #333">{{ Customer.Telphone }}</el-text>
            </p>
            <p>
              <el-text style="color: #999">负责人：</el-text>
              <el-text style="color: #333">
                {{ Customer.LegalPerson }}{{ Customer.LegalMobile }}
              </el-text>
            </p>
            <p>
              <el-text style="color: #999">业务联系人：</el-text>
              <el-text style="color: #333">
                {{ Customer.BusinessPerson }}
                {{ Customer.BusinessPersonMobile }}
              </el-text>
            </p>
          </div>
          <div>
            <el-tag
              v-for="(itm, idx) in Customer.CustomerMarks"
              :key="idx"
              type="danger"
            >
              {{ itm }}
            </el-tag>
          </div>
        </el-card>
        <el-card shadow="hover">
          <template #header>销售人员信息</template>
          <div>
            <p>
              <el-text style="color: #999">部门：</el-text>
              <el-text
                v-for="(item, index) in SalesStaff.Department"
                :key="index"
                style="color: #333"
              >
                [{{ item.DepartmentName }}]
              </el-text>
            </p>
            <p>
              <el-text style="color: #999">职位：</el-text>
              <el-text
                v-for="(item, index) in SalesStaff.StaffPost"
                :key="index"
                style="color: #333"
              >
                [{{ item.StaffPostName }}]
              </el-text>
            </p>
            <p>
              <el-text style="color: #999">销售人员：</el-text>
              <el-text style="color: #333">
                {{ SalesStaff.StaffName }}：{{ SalesStaff.Mobile }}
              </el-text>
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <vab-query-form>
          <vab-query-form-left-panel :span="12">
            <el-button :icon="Plus" type="primary" @click="handleEdit">
              创建一个新的业务商机
            </el-button>
            <!-- <el-button :icon="Delete" type="danger" @click="handleDelete">
              批量放弃跟进
            </el-button> -->
          </vab-query-form-left-panel>
          <vab-query-form-right-panel :span="12">
            <!-- <el-form :inline="true" :model="queryForm" @submit.prevent>
              <el-form-item>
                <el-input
                  v-model.trim="queryForm.title"
                  clearable
                  placeholder="请输入标题"
                />
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search" type="primary" @click="queryData">
                  查询
                </el-button>
              </el-form-item>
            </el-form> -->
          </vab-query-form-right-panel>
        </vab-query-form>
        <el-tabs
          :model-value="queryForm.tab"
          type="border-card"
          @tab-click="handleTabClick"
        >
          <el-tab-pane label="推荐商机" name="recommend">
            <el-table
              v-loading="listLoading"
              :data="customerList"
              @selection-change="setSelectRows"
            >
              <el-table-column
                align="center"
                label="商机ID"
                prop="OrderID"
                width="100"
              />
              <el-table-column
                align="center"
                label="推荐商机"
                prop="BusinessOrderName"
              />
              <el-table-column align="center" label="商机状态">
                <template #default="{ row }">
                  <span
                    v-if="row.OrderState == 0 && row.SaleStaffID == 0"
                  ></span>
                  <span v-if="row.OrderState == 0 && row.SaleStaffID !== 0">
                    跟进中
                  </span>
                  <span v-if="row.OrderState > 0">已签约</span>
                  <span v-if="row.OrderState == -100">已放弃</span>
                  <span v-if="row.OrderState < -100">已流出</span>
                  <span v-if="row.OrderState == -99">已被撞走</span>
                  <span v-if="row.OrderState == -98">已被调配</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="挑入跟进人">
                <template #default="{ row }">
                  <span v-if="row.SaleStaffID == SalesStaff.StaffID">
                    {{ SalesStaff.StaffName }}
                  </span>
                  <span
                    v-if="
                      row.SaleStaffID != 0 &&
                      row.SaleStaffID != SalesStaff.StaffID
                    "
                  >
                    ***
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="申请挑入">
                <template #default="{ row }">
                  <el-button
                    v-if="
                      row.isMainPick == 0 ||
                      (row.isMainPick == 2 && row.OrderState == -100)
                    "
                    size="small"
                    type="primary"
                    @click="toBusiness(row)"
                  >
                    挑入商机
                  </el-button>
                  <el-button
                    v-if="row.isMainPick == 1"
                    size="small"
                    type="success"
                    @click="toBusiness(row)"
                  >
                    已挑入,去跟进
                  </el-button>
                  <el-button
                    v-if="row.isMainPick == 2 && row.OrderState == 0"
                    size="small"
                    type="warning"
                    @click="toBusiness(row)"
                  >
                    申请挑入
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="跟进中商机" name="tracking">
            <el-table
              v-loading="listLoading"
              :data="list"
              @selection-change="setSelectRows"
            >
              <el-table-column
                align="center"
                show-overflow-tooltip
                type="selection"
              />
              <el-table-column
                align="center"
                label="商机合同ID"
                prop="OrderID"
                show-overflow-tooltip
                width="100"
              />
              <el-table-column
                align="center"
                label="商机生成时间"
                prop="addTime"
                show-overflow-tooltip
                width="200"
              />
              <el-table-column
                align="center"
                label="跟进产品类"
                prop="TrackProduct.BusinessProduct"
                show-overflow-tooltip
              />
              <el-table-column align="center" label="跟进状态" width="100">
                <template #default="{ row }">
                  <span v-if="row.OrderState === 0" style="color: #ff6600">
                    跟进中
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="跟进小记" width="100">
                <template #default="{ row }">
                  <el-button @click="getTracklist(row)">跟进小记</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template #default="{ row }">
                  <el-button @click="handleEdit(row)">修改商机状态</el-button>
                  <el-button @click="handleGiveupTrack(row)">
                    放弃跟进
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page="queryForm.pageNo"
              :layout="layout"
              :page-size="queryForm.pageSize"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </el-tab-pane>
          <el-tab-pane label="已签约商机" name="signed">
            <el-table
              v-loading="listLoading"
              :data="list"
              @selection-change="setSelectRows"
            >
              <el-table-column
                align="center"
                show-overflow-tooltip
                type="selection"
              />
              <el-table-column
                align="center"
                label="商机合同ID"
                prop="OrderID"
                show-overflow-tooltip
                width="100"
              />
              <el-table-column
                align="center"
                label="商机生成时间"
                prop="addTime"
                show-overflow-tooltip
                width="200"
              />
              <el-table-column
                align="center"
                label="跟进产品类"
                prop="TrackProduct.BusinessProduct"
                show-overflow-tooltip
              />
              <el-table-column align="center" label="跟进状态" width="100">
                <template #default="{ row }">
                  <span v-if="row.OrderState > 0" style="color: green">
                    已签约
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="跟进小记" width="100">
                <template #default="{ row }">
                  <el-button @click="getTracklist(row)">跟进小记</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template #default="{ row }">
                  <el-button
                    v-if="Math.abs(row.OrderState) < 2"
                    @click="handleEdit(row)"
                  >
                    修改商机状态
                  </el-button>
                  <el-button
                    v-if="Math.abs(row.OrderState) === 1"
                    @click="createOrder(row)"
                  >
                    已签约到单录入
                  </el-button>
                  <el-button
                    v-if="Math.abs(row.OrderState) > 1"
                    @click="createOrder(row)"
                  >
                    已到单录入
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page="queryForm.pageNo"
              :layout="layout"
              :page-size="queryForm.pageSize"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </el-tab-pane>
          <el-tab-pane label="已放弃商机" name="giveup">
            <el-table
              v-loading="listLoading"
              :data="list"
              @selection-change="setSelectRows"
            >
              <el-table-column
                align="center"
                show-overflow-tooltip
                type="selection"
              />
              <el-table-column
                align="center"
                label="商机合同ID"
                prop="OrderID"
                show-overflow-tooltip
                width="100"
              />
              <el-table-column
                align="center"
                label="商机生成时间"
                prop="addTime"
                show-overflow-tooltip
                width="200"
              />
              <el-table-column
                align="center"
                label="跟进产品类"
                prop="TrackProduct.BusinessProduct"
                show-overflow-tooltip
              />
              <el-table-column align="center" label="跟进状态" width="300">
                <template #default="{ row }">
                  <div v-if="row.OrderState == -98">已被调配</div>
                  <div v-if="row.OrderState == -99">已被撞走</div>
                  <div v-if="row.OrderState == -100">主动放弃</div>
                  <div v-if="row.OrderState < -100">流出</div>
                  <div>
                    <span>
                      {{ row.GiveupTrackTime }}
                    </span>
                    <br />
                    <span>（{{ row.GiveupTrackMemo }}）</span>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" label="跟进小记" width="100">
                <template #default="{ row }">
                  <el-button @click="getTracklist(row)">跟进小记</el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template #default="{ row }">
                  <el-button @click="handleEdit(row)">修改商机状态</el-button>
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination
              background
              :current-page="queryForm.pageNo"
              :layout="layout"
              :page-size="queryForm.pageSize"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </el-tab-pane>
          <!-- <el-tab-pane label="挑入申请" name="transfer">
            <el-table
              v-loading="listLoading"
              :data="applyList"
              @selection-change="setSelectRows"
            >
              <el-table-column
                align="center"
                label="商机ID"
                prop="OrderID"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="公司名称"
                prop="CustomerAllName"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="商机名称"
                prop="BusinessOrderName"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="商机时间"
                prop="AddTime"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="原跟进人"
                prop="SaleStaffName"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="申请人"
                prop="PickStaffName"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="申请原因"
                prop="PickMemo"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="审核时间"
                prop="CheckTime"
                show-overflow-tooltip
              />
              <el-table-column align="center" label="跟进状态" width="100">
                <template #default="{ row }">
                  <div v-if="row.CheckState === 0" style="color: #ff6600">
                    待审核
                  </div>
                  <div v-if="row.CheckState === 1" style="color: green">
                    已通过
                  </div>
                  <div v-if="row.CheckState === -1">未通过</div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="审核备注"
                prop="CheckMemo"
                show-overflow-tooltip
              />
            </el-table>
            <el-pagination
              background
              :current-page="queryForm.pageNo"
              :layout="layout"
              :page-size="queryForm.pageSize"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </el-tab-pane> -->
        </el-tabs>
      </el-col>
    </el-row>
    <edit ref="editRef" @fetch-data="fetchData" @label-edit="labelEdit" />
    <customer ref="customerRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { PickCheckList } from '@/api/customerPickcheck'
  import { CustomerBusiness } from '@/api/common'
  import { getList, giveupTrack } from '@/api/customerTrackingBusiness'
  import Customer from '@/views/business/components/Customer'
  import Edit from './components/CustomerTrackingBusinessEdit'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'
  import { ApplyBusinessOrder } from '@/api/customerSearchpick'
  export default defineComponent({
    name: 'CustomerTrackingBusiness',
    components: { Edit, Customer },
    setup() {
      const route = useRoute()
      const router = useRouter()
      // const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        applyList: [],
        userInfo: {},
        CustomerInfo: {},
        customerRef: null,
        editRef: null,
        list: [],
        customerList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        isTab: '',
        selectRows: '',
        queryForm: {
          tab: 'tracking',
          CustomerPickID: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        Customer: {},
        SalesStaff: {},
      })

      const handleTabClick = (tab) => {
        console.log(tab, '123123123')
        if (tab.props.name != 'transfer') {
          if (tab.props.name == 'recommend') {
            state.queryForm.tab = tab.props.name
            console.log('推荐商机')
            getCustomerList()
          } else {
            state.queryForm.tab = tab.props.name
            fetchData()
          }
        } else {
          getPickCheckList()
          state.queryForm.tab = tab.props.name
          console.log('我的调入申请')
        }
      }

      const createOrder = (row) => {
        router.push({
          path: '/business/order/createOrder',
          query: { orderid: row.OrderID },
        })
      }
      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleEdit = (row) => {
        const addnew = {
          OrderID: 0,
          CustomerID: state.Customer.CustomerID,
          CustomerPickID: state.Customer.CustomerPickID,
        }
        if (row.OrderID) {
          console.log(row, '111')

          state.editRef.showEdit(row)
        } else {
          state.editRef.showEdit(addnew)
        }
      }
      const getTracklist = (row) => {
        router.push({
          path: '/customer/trackingList',
          query: { CustomerPickID: row.CustomerPickID, OrderID: row.OrderID },
        })
      }
      const handleGiveupTrack = (row) => {
        if (row.OrderID) {
          // $baseConfirm('你确定要删除放弃跟进吗？', null, async () => {
          //   const { msg } = await giveupTrack({ ids: row.OrderID })
          //   $baseMessage(msg, 'success', 'vab-hey-message-success')
          //   await fetchData()
          // })
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          ElMessageBox.prompt('请输入放弃原因', '你确定要放弃跟进？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: '',
            inputErrorMessage: '请输入放弃原因',
          })
            .then(async ({ value }) => {
              row.GiveupTrackMemo = value
              const { msg } = await giveupTrack(row)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: 'Input canceled',
              })
            })
        }
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { Customer, SalesStaff, TrackingbusinessList },
        } = await getList(state.queryForm)
        state.Customer = Customer
        state.SalesStaff = SalesStaff
        state.list = TrackingbusinessList.list
        state.total = TrackingbusinessList.total
        state.listLoading = false
        // if (state.isTab) {
        //   state.queryForm.tab = state.isTab
        // }
      }
      const CustomerHandle = () => {
        console.log(state.Customer, 'CustomerInfoCustomerInfo')
        state.customerRef.showEdit(state.Customer)
      }
      onMounted(() => {
        state.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        console.log(state.userInfo, ' state.userInfo')
        if (route.query.CustomerPickID) {
          state.queryForm.CustomerPickID = route.query.CustomerPickID
        }
        fetchData()
      })

      const getCustomerList = async () => {
        console.log(state.Customer, 'state.formstate.form')
        const dataMsg = {
          CustomerID: state.Customer.CustomerID,
        }
        const {
          data: { list },
        } = await CustomerBusiness(dataMsg)
        state.customerList = list
        state.listLoading = false
      }

      const labelEdit = (val) => {
        state.queryForm.tab = val
      }

      const toBusiness = async (item) => {
        console.log(item, '123123123')
        //没人挑入
        if (item.isMainPick == 0) {
          const dataMsg = {
            OrderID: item.OrderID,
          }
          const { data } = await ApplyBusinessOrder(dataMsg)
          if (data) {
            ElMessage({
              message: '挑入成功',
              type: 'success',
            })
          }
          state.queryForm.tab = 'tracking'
          fetchData()
        }
        // 自己挑入过的
        if (item.isMainPick == 1) {
          ElMessage({
            message: '已经挑入,请在商机跟进中查看',
            type: 'warning',
          })
          console.log('走这里了吗？')
        }

        if (item.isMainPick == 2) {
          ElMessage({
            message: '暂无开发。挑入别人的',
            type: 'warning',
          })
          console.log('有人挑入了 申请挑入')
        }
      }

      // 我的挑入申请
      const getPickCheckList = async () => {
        const dataMsg = {
          ApplyStaffID: state.userInfo.StaffID,
          CustomerID: state.queryForm.CustomerID,
          checkState: '',
        }
        const { data } = await PickCheckList(dataMsg)
        state.applyList = data
        console.log(data, '2222')
      }

      return {
        ...toRefs(state),
        handleTabClick,
        getPickCheckList,
        toBusiness,
        createOrder,
        CustomerHandle,
        setSelectRows,
        labelEdit,
        handleEdit,
        getTracklist,
        handleGiveupTrack,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        getCustomerList,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
